<template>
  <div class="picture-upload">
    <!--
    使用 Ant Design 的上传组件，配置为图片卡片样式
    自定义上传处理
    上传前校验
    -->
    <a-upload
      list-type="picture-card"
    :show-upload-list="false"
    :custom-request="handleUpload"
    :before-upload="beforeUpload"
    >
    <!-- 已存在图片时显示预览 -->
    <img v-if="picture?.url" :src="picture?.url" alt="avatar" />
    <!-- 无图片时显示上传按钮 -->
    <div v-else>
      <!-- 加载状态显示旋转图标 -->
      <loading-outlined v-if="loading"></loading-outlined>
      <!-- 默认显示加号图标 -->
      <plus-outlined v-else></plus-outlined>
      <div class="ant-upload-text">Upload</div>
    </div>
    </a-upload>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
import { uploadPictureUsingPost } from '@/api/pictureConftroller.ts'

// 组件属性定义
interface Props {
  picture?: API.PictureVO;      // 可选，已有的图片信息（用于编辑场景）
  onSuccess?: (newPicture: API.PictureVO) => void  // 上传成功回调
}
//父组件传值
const props = defineProps<Props>()

/**
 * 将文件转换为 Base64（代码中未实际使用，可能为历史遗留）
 * @param img - 待转换文件
 * @param callback - 转换完成回调
 */
function getBase64(img: Blob, callback: (base64Url: string) => void) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result as string));
  reader.readAsDataURL(img);
}

const fileList = ref([]);          // 未使用的文件列表状态
const loading = ref<boolean>(false); // 加载状态控制

/**
 * 上传前校验
 * @param file - 待上传文件
 * @returns 是否通过校验
 */
const beforeUpload = (file: UploadProps['fileList'][number]) => {
  // 1. 校验文件类型
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) message.error('仅允许 JPG/PNG 格式!');

  // 2. 校验文件大小（2MB限制）
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) message.error('图片需小于 2MB!');

  return isJpgOrPng && isLt2M;
};

/**
 * 自定义上传处理
 * @param param - 包含文件对象的参数
 */
const handleUpload = async ({ file }: any) => {
  loading.value = true;
  try {
    // 构造请求参数：编辑时携带图片ID，新增时无额外参数，从props父这边拿
    const params = props.picture ? { id: props.picture.id } : {};

    // 调用后端上传接口（假设API需要路径参数、请求参数和文件）
    const res = await uploadPictureUsingPost(params, {}, file);

    if (res.data.code === 0 && res.data.data) {
      message.success("上传成功");
      // 触发父组件成功回调，传递新图片数据
      props.onSuccess?.(res.data.data);
    } else {
      message.error("上传失败：" + res.data.message);
    }
  } catch (error) {
    message.error("请求异常");
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
/* 样式覆盖，确保上传区域尺寸 */
.picture-upload :deep(.ant-upload) {
  width: 100% !important;
  height: 100% !important;
  min-height: 152px;
  min-width: 152px;
}

/* 图片预览最大尺寸限制 */
.picture-upload img {
  max-width: 100%;
  max-height: 480px;
}

/* 图标样式 */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

/* 上传提示文本样式 */
.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
